<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--    导入vue的js文件-->
    <!--    本地导入-->
    <!--    线上导入 vue官网-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--    <script>-->
    <!--        window.onload()-->
    <!--    </script>-->
    <title>Vue使用</title>
</head>
<body>

<!--使用vue的方法-->
<!--id指定vue对象名称-->
<div id="app">
    <!--    使用vue语法-->
    <h1>{{name}}</h1>
    <!--    调用组件封装的代码，把定义的组件名称作为标签使用-->
    <zujian></zujian>
</div>

<script>
    // Vue的局部组件
    // 通过变量指定局部组件名称
    var zujian_a = {
        template: "<div>局部组件A{{name}} <h1>{{pos}}</h1>  <button v-on:click='is_Upload'>上传</button></div>",
        data: function () {
            return {name: '局部组件数据：itcast', gender: 'Boy'}

        },
        // 在局部组件定义一个接受全局数据的变量pos
        props: ['pos'],
        // 在局部组件中定义方法
        methods: {
            // 定义传值方法
            is_Upload: function () {
                // 指定绑定的变量值  第二个参数 绑定的数据
                this.$emit('upload', this.gender)

            }
        }
    };

    // Vue全局组件 代码的封装
    Vue.component(
        // 组件名称
        'zujian',
        {
            // 指定封装的代码 在全局组件中使用局部组件
            template: "<div>全局组件 <zujian_a v-bind:pos='age'   v-on:upload='is_Show'></zujian_a></div>",
            // 将局部组件注册到全局组件中
            components: {
                // 指定需要注册的局部组件名称
                zujian_a
            },
            // 指定组件绑定的数据
            data: function () {
                // 将数据通过return进行返回
                return {name: 'itcast', age: 100}
            },
            methods: {
                // 在全局组件中定义接受局部组件变量值的方法
                is_Show: function (data) {
                    // data接受数据
                    alert(data)

                }
            }
        }
    );
    // 定义vue对象
    new Vue({
        // 指定名称
        el: '#app',
        // 指定数据
        data: {
            name: 'Python'
        }
    })
</script>

</body>
</html>